<template>
  <div class="month-table-config">
    <!--右边内容-->
    <div class="content-right">
      <div class="content-top flex">
        <span class='link' @click="FnGoBack">返回</span>
        <div class='flex flex-x-center flex1 f16'>
            <span>考勤报表展示列</span>
        </div>
      </div>
      <div class="content-content">
        <div class="content-head">
          <span class='tip strong'>报表起始时间及工时</span>
          <span class='tip strong'>选择需要在报表显示的字段</span>
          <span class='tip '>每月1日作为报表开始时间，一天的工作时长</span>
        </div>
        <div class="content-table">
          <div class='box base flex'>
              <div class='left'>
                  <span>基础显示：</span>
              </div>
              <div class='right flex flex-y-center'>
                  <el-checkbox-group v-model="base">
                      <el-checkbox v-for="n1 in baseArr" :key="n1.id" :label="n1"></el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
          <div class='box leave flex'>
              <div class='left'>
                  <span>出勤设置项：</span>
              </div>
              <div class='right flex flex-y-center'>
                  <el-checkbox-group v-model="base">
                      <el-checkbox v-for="n1 in leaveArr" :key="n1.id" :label="n1"></el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
          <div class='box attendance flex'>
              <div class='left'>
                  <span>请假设置项：</span>
              </div>
              <div class='right flex flex-y-center'>
                  <el-checkbox-group v-model="base">
                      <el-checkbox v-for="n1 in attendanceArr" :key="n1.id" :label="n1"></el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
          <div class='box overtime flex'>
              <div class='left'>
                  <span>加班设置项：</span>
              </div>
              <div class='right flex flex-y-center'>
                  <el-checkbox-group v-model="base">
                    <el-checkbox v-for="n1 in overtimeArr" :key="n1.id" :label="n1"></el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
          <div class='box work-hours flex'>
              <div class='left'>
                  <span>工时设置项：</span>
              </div>
              <div class='right flex flex-y-center'>
                  <el-checkbox-group v-model="base" >
                      <el-checkbox v-for="n1 in workHoursArr" :key="n1.id" :label="n1"></el-checkbox>
                  </el-checkbox-group>
              </div>
          </div>
          <div class='btn-wrap'>
              <el-button type="primary">确定</el-button>
              <el-button type="">取消</el-button>
          </div>
        </div>
      </div>
    </div>

    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import {tempShifts, dept} from '@/const/api'

export default {
  name: 'MonthTableConfig',
  components: {
    Vmask,
  },
  data() {
    return {
      params: {
        include: false,
        className: '',
        pageNum: 1,
        pageSize: 15,
        workShift: 1, // 查询临时班次的标识
      },
      tableLoading: false,
      tableData: [],
      tableConfig: {
        url: '/HolidayRegulato/getHoliday',
        columns: [
          {
            dataIndex: 'name',
            title: '节假日名称',
          },
          {
            dataIndex: 'startDay',
            title: '开始时间',
          },
          {
            dataIndex: 'endDay',
            title: '结束时间',
          },
          {
            dataIndex: 'status',
            title: '是否可补休',
            type: 'meiju',
            meiju: {
              '0': '否',
              '1': '是',
            },
          },
          {
            dataIndex: 'className',
            title: '班次',
          },
          {
            dataIndex: 'deptName',
            title: '部门',
          },
          {
            align: 'center',
            dataIndex: ['modify', 'delete'],
            title: '操作',
          },
        ],
        pparams: {},
      },
      mask: {
        id: null,
        title: '',
        showMask: false,
        form: [
          {
            title: '班次名称',
            width: '',
            type: 'text',
            name: 'className',
            value: '',
            default: '',
            placeholder: '请填写班次名称',
            disabled: false,
            required: true,
          },
          {
            title: '选择颜色',
            width: '',
            type: 'color',
            name: 'color',
            value: '',
            default: '',
            placeholder: '请填选择颜色',
            disabled: false,
            required: true,
          },
          {
            title: '适用部门',
            width: '',
            type: 'select',
            name: 'deptId',
            value: '',
            default: '',
            placeholder: '请填写适用部门',
            disabled: false,
            required: false,
          },
          {
            title: '开始时间',
            width: '',
            type: 'datetime',
            name: 'a',
            value: '',
            default: '',
            placeholder: '请填写开始时间',
            disabled: false,
            required: false,
          },
          {
            title: '结束时间',
            width: '',
            type: 'datetime',
            name: 'b',
            value: '',
            default: '',
            placeholder: '请填写结束时间',
            disabled: false,
            required: false,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      total: 0,
      base: [], // 基础
      leave: [], // 请假
      attendance: [], // 出勤
      overtime: [], // 加班
      workHours: [], // 公司
      baseArr: ['姓名', '部门名', '工号', '手机', '邮件', '备注'], // 基础
      leaveArr: ['应计考勤天数', '实际上班天数', '扣款天数', '实勤天数', '旷工天数', '旷工时数', '实勤时数', '应付工资天数'], // 请假
      attendanceArr: ['事假天数', '事假时数', '病假天数', '病假时数', '年假天数', '年假时数', '调休天数', '调休时数', '剩余年假天数', '剩余年假时数', '剩余调休天数', '剩余调休时数', '请假类型总天数'], // 出勤
      overtimeArr: ['工作日加班天数', '工作日加班时数', '节假日加班天数', '节假日加班时数', '周六日加班天数', '周六日加班时数'], // 加班
      workHoursArr: ['总工时', '打卡工时'], // 公司
    }
  },
  created() {
    window._this = this
  },
  methods: {
      TableBubbling(e) {

      },
      FnMask(e) {

      },
      FnGoBack() {
          this.$router.go(-1)
      }
  }
}
</script>

<style lang="less">
.month-table-config {
    .box {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #ccc;
        .left {
            min-width: 6%;
            margin-right: 1%;
            font-size: 18px
        }
        .right {
            width: 40%;
            .el-checkbox {
                margin: 5px 18px 10px 0;
            }
        }
    }
    .btn-wrap {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .btn-wrap {
        button {
            padding: 10px 30px !important;
            font-size: 15px !important;
        }
    }
}
</style>
